<template>
  <div class="musicbox">
    <div class="music-center">
      <div class="music-left">
        <ul>
          <li>
            <router-link to="/musichome/findmusic" tag="span">
              <span class="iconfont icon-find-music">发现音乐</span>
            </router-link>
          </li>
          <li>
            <router-link to="/musichome/playlist" tag="span">
              <span class="iconfont icon-music-list">推荐歌单</span>
            </router-link>
          </li>
          <li>
            <router-link to="/musichome/newmusic" tag="span">
              <span class="iconfont icon-music">最新音乐</span>
            </router-link>
          </li>
          <li>
            <router-link to="/musichome/musicvideo" tag="span">
              <span class="iconfont icon-mv">最新MV</span>
            </router-link>
          </li>
          <li>
            <router-link to="/musichome/search" tag="span">
              <span class="el-icon-search">搜索音乐</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="music-right">
        <keep-alive exclude="mv,musiclyrics,playlist">
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "music",
  data() {
    return {
      path: "",
    }
  },
  components: {},
  created() {
    //  mehtod:"get",
    //   params:{
    //     type:"lyric",
    //     id:this.$store.state.song.id,
    //     br:128000
    //   }
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      this.path = newVal
    },
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
.musicbox {
  width: 1000px;
  height: calc(100% - 40px) !important;
  margin: 20px 0px;
  background: white;
  .music-center {
    height: 100%;
    width: 1000px;
    background: rgb(255, 255, 255);
    display: flex;
    .music-left {
      width: 150px;
      // background: #dd6d60;
      background: rgb(66, 141, 216);
      ul li {
        list-style: none;

        height: 60px;
        line-height: 60px;
        width: 100%;
        text-align: center;
        color: white;
        transition: 0.5s;
        span {
          font-size: 16px;
          font-weight: bold;
          display: inline-block;
          height: 60px;
          line-height: 60px;
          width: 100%;
          span:before {
            margin-right: 10px;
          }
        }
      }
      ul li:hover {
        cursor: pointer;
        background: rgba(243, 243, 243, 0.5);
      }
    }
    .music-right {
      width: 850px;
      height: 100%;
    }
  }
}
.router-link-active {
  background: white;
  // color: #dd6d60;
  color: rgb(98, 158, 218);
}
</style>
